<template>
  <div>
    <div class="Zh">
      <span :class="{spanBo:!isBtnShow}"></span>
      <img :src="img" alt="" :class="{zhBo1:isBtnShow,zhBo2:!isBtnShow}" />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  props:['img'],
  computed:{
    ...mapState(['isBtnShow'])
  }
};
</script>

<style lang="less" scoped>
@keyframes app {
  0%{
    transform: rotateZ(0deg);
  }
  100%{
    transform: rotateZ(3600deg);
  }
}
  .Zh {
    position: relative;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
    width: 300px;
    background: url("../../assets/d7e4e3a244701ee85fecb5d4f6b5bd57.png")
      no-repeat;
    background-size: 100%;
    span {
      position: absolute;
      left: 131px;
      bottom: -337px;
      width: 150px;
      height: 245px;
      background: url("../../assets/needle-ab.png");
      background-size: 100%;
      transform-origin: 0 0;
      transform: rotate(-100deg);
      transition: 1s ease;
    }
    .spanBo{
      transform: rotate(-118deg);
    }
    img {
      height: 200px;
      width: 200px;
      border-radius: 50%;
      animation: app 360s linear infinite;
    }
    .zhBo1{
      animation-play-state: running;
    }
    .zhBo1{
      animation-play-state: paused;
    }
  }
</style>